<template>
  <base-module
    class="overview-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <echarts-base :options="typeOptions"></echarts-base>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';
import echartsBase from '@/components/echarts/base';

export default {
  name: 'SecurityComp',
  props: {
    title: {
      type: [String, Object],
      default: '安全整改'
    },
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      typeEchartsData: {
        legend: [],
        data: []
      },
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    typeOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: this.typeEchartsData.legend,
          bottom: 0,
          // left: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '安全整改统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '45%'],
            label: {
              color: '#fff',
              formatter: '{b}: {d}%'
            },
            data: this.typeEchartsData.data,
            // itemStyle: {
            //   color: 'rgb(85, 201, 246)'
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
          // {
          //   name: '安全类型占比',
          //   type: 'pie',
          //   radius: '55%',
          //   center: ['50%', '45%'],
          //   label: {
          //     color: '#fff',
          //     formatter: '{b}: {d}%'
          //   },
          //   data: this.typeEchartsData.data,
          //   // itemStyle: {
          //   //   color: 'rgb(85, 201, 246)'
          //   // },
          //   emphasis: {
          //     itemStyle: {
          //       shadowBlur: 10,
          //       shadowOffsetX: 0,
          //       shadowColor: 'rgba(0, 0, 0, 0.5)'
          //     }
          //   }
          // }
        ]
      };
    },
  },
  created() {
    this.getSecurityStateList();
  },
  components: {
    BaseModule,
    echartsBase
  },
  methods: {
    // 获取安全类型占比数据
    async getSecurityLevelList() {
      const { success, data: { data }} = await this.$Model.getSecurityLevelList({
        projectId: this.projectId,
        type: '2',
        queryTime: this.$moment().format('yyyy')
      });
      if (success && data) {
        this.setTypeList(data);
      }
    },
    // 获取安全整改统计数据
    async getSecurityStateList() {
      const { success, data: { data }} = await this.$Model.getSecurityStateList({
        type: '2',
        queryTime: this.$moment().format('YYYY'),
        projectId: this.projectId
      });
      if (success && Array.isArray(data)) {
        this.setRectificationSeries(data);
      }
    },
    /**
     * 设置整改统计echarts数据
     * @param data {Array}
     */
    setRectificationSeries(data) {
      // const setConfig = (name, colorList = [], list = []) => {
      //   return {
      //     name,
      //     type: 'bar',
      //     barGap: 0,
      //     data: list,
      //     itemStyle: {
      //       color: {
      //         type: 'linear',
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         colorStops: [{
      //           offset: 0, color: colorList[0] || 'rgba(81, 202, 216, 1)'
      //         }, {
      //           offset: 1, color: colorList[1] || 'rgba(81, 202, 216, 0.3)'
      //         }],
      //         global: false // 缺省为 false
      //       },
      //     }
      //   };
      // };
      const result = {
        data: [],
        xAxisData: [],
        legend: []
      };
      data && data.forEach(item => {
        const { month, stateList } = item;
        result.xAxisData.push(month);
        stateList.forEach(val => {
          const { stateName, num } = val;
          const newNum = isNaN(num) ? 0 : Number(num);
          const currentVal = result.data.find(v => v.name === stateName);
          if (currentVal) {
            currentVal.value += newNum;
            return;
          }
          result.data.push({
            name: stateName,
            value: newNum
          });
        });
      });
      result.legend = result.data.map(item => item.name);
      this.typeEchartsData = result;
    },
    /**
       * 设置安全类型占比图表数据
       * @param data {Array}
       */
    setTypeList(data) {
      const result = {
        legend: [],
        data: []
      };
      data && data.forEach(item => {
        const { checkList = [] } = item;
        checkList && checkList.forEach(val => {
          const { dangerType, num } = val;
          const currentItem = result.data.find(v => v.name === dangerType);
          const levelNum = isNaN(num) ? 0 : Number(num);
          if (currentItem) {
            currentItem.value += levelNum;
            return;
          }
          result.data.push({
            name: dangerType,
            value: levelNum
          });
        });
      });
      result.data = result.data.filter(item => item.value);
      result.legend = result.data.map(item => item.name);
      this.typeEchartsData = result;
    },
    handleClick() {
      this.$router.push('/security/government');
    }
  }
};
</script>

<style scoped lang="scss">
  .overview-comp {
    .list-container {
      width: 100%;
      height: 100%;
      padding-top: 10px;
      overflow-y: auto;
      .list-item {
        float: left;
        display: flex;
        align-items: flex-start;
        justify-content: left;
        color: rgba(179, 189, 248, .6);
        min-height: 33px;
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        border-bottom: 1px solid rgba(45, 56, 123, .2);
        overflow: hidden;
        .list-item-label {
          margin-right: 20px;
          width: 100px;
          min-height: 33px;
          display: flex;
          align-items: center;
        }
        .list-item-text {
          color: #fff;
          width: calc(100% - 100px);
          min-height: 33px;
          display: flex;
          line-height: 25px;
          align-items: center;
        }
      }
    }
  }
</style>
